<template>
  <div class="lecture-page">
    <h1 class="lecture-title">健康讲堂</h1>

    <el-card class="category-card">
      <div class="category-title">讲堂分类</div>
      <div class="category-list">
        <el-button v-for="cat in categories" :key="cat.value"
          :type="cat.value === selectedCategory ? 'success' : 'default'" round @click="selectCategory(cat.value)"
          class="category-btn">
          {{ cat.label }}
        </el-button>
      </div>
    </el-card>

    <div class="section-title">精选讲座</div>
    <div class="lecture-list">
      <el-card v-for="item in filteredLectures" :key="item.id" class="lecture-card" shadow="hover">
        <div class="lecture-content">
          <img :src="item.img" class="lecture-img" alt="讲座封面" @error="e => e.target.src = defaultImg" />
          <div class="lecture-info">
            <div class="lecture-name">{{ item.title }}</div>
            <div class="lecture-desc">{{ item.desc }}</div>
            <div class="lecture-meta">
              <span>讲师: {{ item.teacher }}</span>
              <span>时长: {{ item.duration }}</span>
            </div>
            <div class="lecture-actions">
              <el-icon>
                <Star />
              </el-icon>
              <el-icon>
                <Share />
              </el-icon>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { Share, Star } from '@element-plus/icons-vue'
import { computed, ref } from 'vue'

const defaultImg = '/img/health-default.png'

const localImgs = ['/img/1.png', '/img/2.png', '/img/3.png', '/img/4.png', '/img/5.png']

const categories = [
  { label: '全部', value: 'all' },
  { label: '视频讲座', value: 'video' },
  { label: '健康文章', value: 'article' },
  { label: '专家访谈', value: 'expert' }
]
const selectedCategory = ref('all')
const lectures = ref([
  {
    id: 101,
    img: localImgs[0],
    title: '痤疮的科学防治与日常护理',
    desc: '讲解痤疮的成因、科学治疗方法及日常护理要点。',
    teacher: '皮肤科医生王敏',
    duration: '30分钟',
    category: 'video'
  },
  {
    id: 102,
    img: localImgs[1],
    title: '敏感肌的修复与防护',
    desc: '敏感肌人群如何选择护肤品、修复皮肤屏障、避免过敏。',
    teacher: '护肤专家李倩',
    duration: '25分钟',
    category: 'article'
  },
  {
    id: 103,
    img: localImgs[2],
    title: '湿疹的饮食与生活管理',
    desc: '湿疹患者的饮食禁忌、生活习惯及中医调理建议。',
    teacher: '中医师张伟',
    duration: '20分钟',
    category: 'expert'
  },
  {
    id: 104,
    img: localImgs[3],
    title: '皮肤屏障修复专题讲座',
    desc: '皮肤屏障受损的表现、修复方法及日常护理。',
    teacher: '皮肤科主任周楠',
    duration: '18分钟',
    category: 'video'
  },
  {
    id: 1,
    img: localImgs[0],
    title: '中医养生：四季调理之道',
    desc: '详细讲解四季养生要点，助您健康生活。',
    teacher: '李医师',
    duration: '30分钟',
    category: 'video'
  },
  {
    id: 2,
    img: localImgs[1],
    title: '高血压的日常管理',
    desc: '从饮食、运动方面给出高血压患者的日常管理建议。',
    teacher: '健康管理师',
    duration: '15分钟',
    category: 'article'
  },
  {
    id: 3,
    img: localImgs[2],
    title: '专家访谈：失眠的调理方法',
    desc: '专家解析失眠原因及中医非药物疗法。',
    teacher: '王教授',
    duration: '45分钟',
    category: 'expert'
  },
  {
    id: 4,
    img: localImgs[3],
    title: '儿童中医体质养护',
    desc: '关注儿童健康，教您辨识孩子体质并科学养护。',
    teacher: '张儿科医生',
    duration: '25分钟',
    category: 'video'
  },
  {
    id: 5,
    img: localImgs[4],
    title: '健康饮食与慢病预防',
    desc: '科学饮食习惯，远离慢性疾病。',
    teacher: '营养师李明',
    duration: '20分钟',
    category: 'article'
  },
  {
    id: 6,
    img: localImgs[0],
    title: '专家访谈：运动与健康',
    desc: '运动医学专家讲解科学运动对健康的益处。',
    teacher: '运动专家赵强',
    duration: '35分钟',
    category: 'expert'
  },
  {
    id: 7,
    img: localImgs[1],
    title: '老年人健康管理',
    desc: '关注老年人健康，讲解常见慢病的管理与预防。',
    teacher: '老年病科主任',
    duration: '28分钟',
    category: 'video'
  },
  {
    id: 8,
    img: localImgs[2],
    title: '健康科普：合理作息的重要性',
    desc: '良好的作息习惯对健康的影响。',
    teacher: '健康科普讲师',
    duration: '12分钟',
    category: 'article'
  },
  {
    id: 9,
    img: localImgs[3],
    title: '专家访谈：心理健康与压力管理',
    desc: '心理专家教你如何应对压力，保持心理健康。',
    teacher: '心理专家王蕾',
    duration: '40分钟',
    category: 'expert'
  }
])

const filteredLectures = computed(() =>
  selectedCategory.value === 'all'
    ? lectures.value
    : lectures.value.filter(l => l.category === selectedCategory.value)
)

function selectCategory(val) {
  selectedCategory.value = val
}
</script>

<style scoped>
.lecture-page {
  padding: 20px;
  max-width: 700px;
  margin: 0 auto;
}

.lecture-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: 2px;
}

.category-card {
  margin-bottom: 24px;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  background: linear-gradient(90deg, #e0f7fa 0%, #f1f8e9 100%);
}

.category-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #388e3c;
  margin-bottom: 10px;
}

.category-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.category-btn {
  font-weight: 500;
  letter-spacing: 1px;
}

.section-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #388e3c;
  margin: 18px 0 12px 0;
}

.lecture-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lecture-card {
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s;
}

.lecture-card:hover {
  box-shadow: 0 6px 24px rgba(56, 142, 60, 0.12);
}

.lecture-content {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.lecture-img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  background: #f6f6f6;
  flex-shrink: 0;
}

.lecture-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lecture-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #222;
}

.lecture-desc {
  color: #666;
  font-size: 0.98rem;
}

.lecture-meta {
  color: #888;
  font-size: 0.92rem;
  margin-top: 2px;
  display: flex;
  gap: 18px;
}

.lecture-actions {
  margin-top: 6px;
  display: flex;
  gap: 12px;
  color: #bdbdbd;
}
</style>